<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }

        span {
            width: 80px;
            height: 80px;
            background-color: red;
            color: white;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>

<body>
    <p>得分：<b>0</b></p>
</body>
<script>
    /*
        实现思路：
            a、实现控制一个字符向下掉落
                分析：由于字符是逐步向下掉落 肯定是需要使用定时器,定时器做什么？字符是页面上一个元素，向下走就是控制元素的定位
                1、生成出一个标签 能存储随机的一个字符
                    1、使用document.creatElement创建span标签
                    2、设置随机字符,生成的字符可以是0-9 a-z ,这两组可以使用的字符没有规律，随机只能使用随机数，可以将可以使用的字符放到一个字符串中，然后随机生成下标。最后通过随机的下标就可以取到字符
                    3、将span标签添加到页面上
                    4、控制span标签左侧的距离(也需要随机)
                    5、开始使用定时器 控制top值,当span标签接触到底部，需要控制span消失.当span标签到底部消失后。从新来一个字符掉落(就是将步骤a在来一次)
            b、当用户输入的内容与掉落的字符相同，重新掉落字符 然后得分加1
                1、可以通过键盘按下事件获取到按下的字符 与掉落的比较 如果相同 得分+1，从新在生成一个span标签控制下落(继续将a步骤再来一次)
    */

   /**
     * 获取标签上的样式
     */
    function getStyle(dom,styleName){
        if(window.getComputedStyle){
            // 表示是w3c的浏览器 
            // window.getComputedStyle(dom) 得到的是对象 是要获取到styleName变量值对应的属性 所以使用数组格式
            return window.getComputedStyle(dom)[styleName];
        }
        // IE的低版本
        return dom.currentStyle[styleName];
    }
    // 生成指定区间的随机整数
    function makeRandom(min,max){
        return Math.floor(Math.random()*(max-min)+min)
    }
    // 生成随机的字符
    function createChar(){
        // 记录可以使用的字符
        var str = 'qwertyuiopasdfghjklzxcvbnm';
        // 随机生成小标
        var index = makeRandom(0,str.length);
        return str[index];
    }

    var spanDom;//保存span标签的dom对象
    var timer;//保存定时器标识
    // 1、创建span标签并且控制下落    
    function createSpan(){
        // 创建span标签
        spanDom = document.createElement('span');
        // 设置span标签的内容
        spanDom.innerHTML = createChar();
        // 获取整个文档的宽度  也可以使用window.innerWidth
        var maxWidth = document.body.clientWidth || document.documentElement.clientWidth; 
        // 记录当前随机的left值  left的最大值应该是 文档的宽度-span标签的宽度
        var leftInit = makeRandom(0,maxWidth-40);
        // 设置left值
        spanDom.style.left = leftInit+'px';
        // 将span标签加入到页面
        document.body.appendChild(spanDom)
        // 向下移动
        timer = setInterval(function(){
            // 获取到当前 span标签的top值
            var top = parseInt(getStyle(spanDom,'top'));
            var maxHeight = document.body.clientHeight || document.documentElement.clientHeight;
            if(top >= (maxHeight-40)){
                // 已经到底部
                clearInterval(timer);
                // 设置span标签销毁
                document.body.removeChild(spanDom);
                createSpan();
            }else{
                top+=5;
                spanDom.style.top = top+10 +'px';
            }
        },20)

    }
    createSpan();

    document.onkeypress = function(e){
        var event = e||window.event;
        if(event.keyCode == spanDom.innerHTML.charCodeAt(0)){
            clearInterval(timer);
            document.body.removeChild(spanDom);
            createSpan();
            document.querySelector('b').innerHTML = document.querySelector('b').innerHTML-0+1
        }
    }
</script>
</html>